<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tablec"
    >
      <el-table-column
        align="center"
        :label="translate('orderNum')"
        min-width="280"
        prop="id"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{
            scope.row.id
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('exchangeUser')"
        min-width="220"
        prop="nickName, phone"
        show-overflow-tooltip
      >
        <template slot-scope="scope"
          >{{ scope.row.nickName }} - {{ scope.row.phone }}</template
        >
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('goodsName')"
        min-width="200"
        prop="name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('goodsAllPriceInteg')"
        prop="price"
        min-width="120"
      />
      <!-- <el-table-column
        align="center"
        label="库存"
        prop="stock"
        min-width="120"
      /> -->
      <el-table-column
        align="center"
        :label="translate('exchangeTime')"
        prop="createTime"
        min-width="170"
      />
      <el-table-column
        align="center"
        :label="translate('claimDeliveTime')"
        prop="pickupTime"
        min-width="170"
      >
        <template slot-scope="scope">
          {{ scope.row.sendTime || scope.row.pickupTime || "" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('operator')"
        prop="consignorName"
        show-overflow-tooltip
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="translate('claimMethods')"
        prop="claimType"
        min-width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          {{
            scope.row.claimType == "1"
              ? translate("pickSelf")
              : translate("express")
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('orderStatus')"
        prop="statusName"
        min-width="100"
        fixed="right"
      />
      <el-table-column
        :label="translate('handle')"
        min-width="120"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status == '0' && scope.row.claimType != '1'"
              v-preventReClick
              type="text"
              @click="fh(scope.row.id, 0, translate('deliver'))"
              >{{ translate("deliver") }}</el-button
            >
            <el-button
              v-else-if="scope.row.status == '0' && scope.row.claimType == '1'"
              v-preventReClick
              type="text"
              @click="fh(scope.row.id, 1, translate('pickSelf'))"
              >{{ translate("pickSelf") }}</el-button
            >
            <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <Detail ref="DetailRef" />
    <el-dialog
      :title="form.title"
      :visible.sync="showFh"
      width="400px"
      top="25vh !important"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-width="form.type == 1 ? '5em' : '7em'"
        label-suffix="："
      >
        <el-form-item
          v-if="form.type == 1"
          :label="translate('pickCode')"
          prop="claimCode"
        >
          <el-input
            v-model="form.claimCode"
            maxlength="50"
            :placeholder="translate('pickCodePlace')"
          />
        </el-form-item>
        <el-form-item
          v-if="form.type == 0"
          :label="translate('deliverCompany')"
          prop="kdCompany"
        >
          <el-input
            v-model="form.kdCompany"
            maxlength="50"
            :placeholder="translate('deliverCompanyPlace')"
          />
        </el-form-item>
        <el-form-item
          v-if="form.type == 0"
          :label="translate('trackingNumber')"
          prop="kdNo"
        >
          <el-input
            v-model="form.kdNo"
            maxlength="50"
            :placeholder="translate('trackingNumberPlace')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFh">{{ translate("cancel") }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="clickFh('ruleForm')"
          >{{ translate("enter") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { integralOrder, integralDeliver } from '@/api'
import QueryForm from '@/components/QueryForm'
import Detail from './orderDetail.vue'
export default {
  name: 'IntegralOrder',
  components: {
    QueryForm,
    Detail
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'memberName',
          type: 'input',
          label: this.translate('exchangeUser'),
          placeholder: this.translate('exchangeUserPlace'),
          clearable: true
        }, {
          filed: 'goodsName',
          type: 'input',
          label: this.translate('goodsName'),
          placeholder: this.translate('goodsNamePlace'),
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: this.translate('orderStatus'),
          placeholder: this.translate('orderStatusplace'),
          clearable: true,
          options: [
            { value: '0', label: this.translate('zfcg') },
            { value: '1', label: this.translate('deliverEd') },
            { value: '2', label: this.translate('picked') }
          ]
        }],
        online: true
      },
      showFh: false,
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      rules: {
        kdCompany: [
          { required: true, message: this.translate('deliverCompanyPlace'), trigger: 'blue' }
        ],
        kdNo: [
          { required: true, message: this.translate('trackingNumberPlace'), trigger: 'blue' }
        ]
      },
      form: {},
      filters: {},
      listLoading: true
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    cancelFh() {
      this.form = {}
      this.$refs.ruleForm.clearValidate()
      this.showFh = false
    },
    clickFh(formName) {
      const { form } = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          integralDeliver({ param: { ...form } }).then(res => {
            if (res.errorCode === '000000') {
              const title = form.title + this.translate('success')
              this.$message.success(title)
              this.cancelFh()
              this.getList()
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleDetail(item) {
      this.$refs.DetailRef.getOrderDetail(item.id)
      this.$refs.DetailRef.isShow = true
    },
    fh(id, type, title) {
      this.form = {
        id,
        type,
        title
      }
      this.showFh = true
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
      // this.$confirm('确认发货, 是否继续?', this.translate('ts'), {
      //   confirmButtonText: this.translate('qd'),
      //   cancelButtonText: this.translate('cancel'),
      //   type: 'warning',
      //   callback: () => {},
      //   beforeClose: (action, ctx, close) => {
      //     if (action !== 'confirm') {
      //       close()
      //       return
      //     }
      //     ctx.confirmButtonLoading = true
      //     integralDeliver({ param: { id }}).then(res => {
      //       ctx.confirmButtonLoading = false
      //       close()
      //       if (res.errorCode === '000000') {
      //         that.$message.success('发货成功')
      //         that.getList()
      //       }
      //     })
      //       .catch(() => { ctx.confirmButtonLoading = false })
      //   }
      // }).finally(() => {})
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      this.listLoading = false
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      integralOrder({ pagination, param: { venueId, ...filters } })
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
